<template>
  <div class="SiteSourceData-content">
    <Row :gutter="16">
      <Col span="3" class="panel-search-siteCode">
        <Input placeholder="采集站编号" v-model="queryObj.siteCode"/>
      </Col>
      <Col span="6" class="panel-search-name">
        <Input placeholder="文件名称" v-model="queryObj.name"/>
      </Col>
      <Col span="3" class="panel-search-startTime">
        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间" v-model="queryObj.startDateTime" @on-change="queryObj.startDateTime=$event"></DatePicker>
      </Col>
      <Col span="3" class="panel-search-endTime">
        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间" v-model="queryObj.endDateTime" @on-change="queryObj.endDateTime=$event"></DatePicker>
      </Col>
      <Col span="1">
        <Button type="primary" @click="handleSearch()">查询</Button>
      </Col>
    </Row>
    <div class="panel-count">共 <span class="count-number">{{this.total.toLocaleString()}}</span> 条数据({{this.spendTime}} 秒)</div>
    <Card>
      <tables :loading="loading" stripe ref="tables" v-model="tableData" :columns="columns"/>
      <Page class="panel-page" :total="total" :current="page" :page-size="size" @on-change="changePage" show-elevator />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { apiSearch } from '@/api/siteSourceData'
export default {
  name: 'SiteSourceData',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '采集站编号', key: 'siteCode', sortable: false, width: 150 },
        { title: '请求标识', key: 'requestIdentity', sortable: false },
        { title: '文件名称', key: 'name', sortable: false },
        { title: '创建时间', key: 'createTime', sortable: true, width: 150 }
      ],
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      spendTime: 0,
      queryObj: {
        siteCode: '',
        name: '',
        startDateTime: '',
        endDateTime: ''
      },
      loading: false
    }
  },
  methods: {
    // 获取数据
    getData () {
      this.loading = true
      const param = JSON.stringify(this.queryObj)
      apiSearch(this.page, param).then(res => {
        const code = res.data.code
        // console.log(res.data)
        if (code === 0) {
          this.total = res.data.data.total
          this.page = res.data.data.page
          this.spendTime = res.data.data.spendTime
          this.tableData = res.data.data.content
          this.loading = false
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    // 点击页码
    changePage (page) {
      this.page = page
      this.getData()
    },
    handleSearch () {
      this.page = 1
      this.getData()
    }
  },
  mounted () {
    this.page = 1
    this.getData()
  }
}
</script>

<style lang="less">
  @import "./SiteSourceData";
</style>
